<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 60%;
            margin: 0 auto;
            background-color: aqua;
            min-height: 220px;
        }
        h2{
            text-align: center;
            padding-top: 10px;
        }
        p{
            margin: 20px auto;
            height: 40px;
            width: 75%;
            padding: 20px;
            border: 1px solid goldenrod;
            background-color: rgb(221,220,220);
        }
        span{
            margin-left: 100px;
        }
        
       
    </style>

</head>
<body>
    <div class="container">
<h2>循环解决鸡兔同笼问题</h2>
<span>鸡兔同笼，鸡兔一共<input type="text" id="txtNumber" value="0" style="box-sizing:border-box;width:60px"/>
	<input type="button" value="▲" id="up"  />
	<input type="button" value="▼" id="down" />

只。笼子里脚一共<input type="text"  id="txtNumber2"  value="0" style="box-sizing:border-box;width:60px"/>
<input type="button" value="▲" id="up2"  />
<input type="button" value="▼" id="down2"  />
只,请问分别有多少只鸡和兔？<input type="button" id="js" value="计算"></span>
<p id="a"></p>
    </div>
</body>
<script>
     document.getElementById("up").onclick=function(){
        var showControl = document.getElementById("txtNumber");
        showControl.value = parseInt(showControl.value) + 1;
     }
     document.getElementById("down").onclick=function(){
        var showControl = document.getElementById("txtNumber");
        showControl.value = parseInt(showControl.value)-1;
     }
     document.getElementById("up2").onclick=function(){
        var showControl = document.getElementById("txtNumber2");
        showControl.value = parseInt(showControl.value) + 1;
     }
     document.getElementById("down2").onclick=function(){
        var showControl = document.getElementById("txtNumber2");
        showControl.value = parseInt(showControl.value)-1;
     }
     document.getElementById("js").onclick=function(){
        var a=document.getElementById("txtNumber").value;
        var b=document.getElementById("txtNumber2").value;
        var oDiv = document.getElementById("a");
           var j,t;   
           for(var i=1;i<=a;i++){
                   j=i;
        if((j+(a-j)==a)&&(2*j+4*(a-j)==b)){  
           oDiv.innerHTML="鸡："+j+"&nbsp;&nbsp;兔："+(a-j);}
           
          
           
      }
      oDiv.innerHTML="无解";
           }
        
</script>
     

</html>